<template>
    <div class="Mheader1">
     <el-button @click="changeMenu()" color="#1976d2"><el-icon size="20px"><Menu /></el-icon></el-button>
      <div class="title">xx标题</div>
    </div>
    <div class="Mheader2"><input v-model="sousu"  @keyup.enter="handle()" class="changecolor1" type="text"><el-icon @click="handle()" class="sousu" size="24px" ><Search /></el-icon></div>
</template>

<script setup lang="ts" name="Mheader">
      import {useStore} from '@/stores/index'
      import { ref } from 'vue';
      import { getsousu } from '@/api';
       const {collapseMenu} = useStore()
       function changeMenu(){
            collapseMenu()
       }
      const sousu = ref()
       function  handle(){
        if(sousu){
          getsousu({params:{sousu}}).then()
        }
           
       }
</script>

<style scoped>


.Mheader1{
  display: flex;
  margin: auto 10px;
  color: white;
}

 .title{
  font-size: 20px;
  margin: auto;
  padding-left:10px;
 }
.Mheader2{
  display: flex;
  width: 200px;
  height: 40px;
  margin: auto 10px;
}
.Mheader2,input{
  background-color: #488cd0;
}
input{
   display: inline-block;
   margin:10px 10px;
   width:140px;
   outline: none;
   border: none;
   font-size: 18px;
   color:#353535;
}
.sousu{
  margin:auto;
  color: azure;
}

 
</style>